
<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="description" content="">
  <title>张文川-前端开发</title>
  <link rel="apple-touch-icon" href="apple-touch-icon.png">
  <link href="https://cdn.bootcss.com/font-awesome/4.7.0/fonts/fontawesome-webfont.svg">
  <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}*,*::before,*::after{-webkit-box-sizing:inherit;box-sizing:inherit}html{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:12px}body{font-family:Helvetica, Arial, sans-serif;font-size:14px;color:#333;line-height:1.42858}a{text-decoration:none;color:#348fe2}code,kbd,pre,samp{font-family:Menlo, Monaco, Consolas, "Courier New", monospace}pre{display:block;font-size:13px;line-height:1.42858;color:#333;word-break:break-all;word-wrap:break-word;background-color:#f5f5f5;border:1px solid #ccc;border-radius:4px;overflow:auto}code{padding:2px 4px;font-size:90%;color:#c7254e;background-color:#f9f2f4;border-radius:3px}kbd{padding:2px 4px;font-size:90%;color:#fff;background-color:#333;border-radius:3px}h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.1}small,.small{font-weight:400;line-height:1;color:#777;font-size:65%}h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:18px}h5{font-size:14px}h6{font-size:12px}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.btn{display:inline-block;padding:4px 12px;text-align:center;vertical-align:middle;line-height:1.42858;font-size:14px;border:2px solid transparent;border-radius:4px;cursor:pointer;outline:none}.btn.default{color:#fff;background-color:#b6c2c9}.btn.default:hover{background-color:#a7b6be}.btn.default:focus{background-color:#a7b6be}.btn.default:active{background-color:#a7b6be}.btn.primary{color:#fff;background-color:#348fe2}.btn.primary:hover{background-color:#2083dd}.btn.primary:focus{background-color:#2083dd}.btn.primary:active{background-color:#2083dd}.btn.info{color:#fff;background-color:#49b6d6}.btn.info:hover{background-color:#34aed1}.btn.info:focus{background-color:#34aed1}.btn.info:active{background-color:#34aed1}.btn.success{color:#fff;background-color:#84b547}.btn.success:hover{background-color:#77a340}.btn.success:focus{background-color:#77a340}.btn.success:active{background-color:#77a340}.btn.danger{color:#fff;background-color:#ff5b57}.btn.danger:hover{background-color:#ff423e}.btn.danger:focus{background-color:#ff423e}.btn.danger:active{background-color:#ff423e}.btn.warning{color:#fff;background-color:#f59c1a}.btn.warning:hover{background-color:#eb900a}.btn.warning:focus{background-color:#eb900a}.btn.warning:active{background-color:#eb900a}.btn.inverted{color:#fff;background-color:#2d353c}.btn.inverted:hover{background-color:#434f59}.btn.inverted:focus{background-color:#434f59}.btn.inverted:active{background-color:#434f59}.btn.link{color:#348fe2;background-color:transparent;border-color:transparent}.btn.link:hover{color:#1c75c7;text-decoration:underline;background-color:transparent}.btn.link:focus{color:#1c75c7;text-decoration:underline;background-color:transparent}.btn.link:active{color:#1c75c7;text-decoration:underline;background-color:transparent}.btn.outline{background-color:transparent}.btn.outline.default{color:#b6c2c9;border-color:#b6c2c9}.btn.outline.default:hover{color:#fff;background-color:#b6c2c9}.btn.outline.default:focus{color:#fff;background-color:#b6c2c9}.btn.outline.default:active{color:#fff;background-color:#b6c2c9}.btn.outline.primary{color:#348fe2;border-color:#348fe2}.btn.outline.primary:hover{color:#fff;background-color:#348fe2}.btn.outline.primary:focus{color:#fff;background-color:#348fe2}.btn.outline.primary:active{color:#fff;background-color:#348fe2}.btn.outline.info{color:#49b6d6;border-color:#49b6d6}.btn.outline.info:hover{color:#fff;background-color:#49b6d6}.btn.outline.info:focus{color:#fff;background-color:#49b6d6}.btn.outline.info:active{color:#fff;background-color:#49b6d6}.btn.outline.success{color:#84b547;border-color:#84b547}.btn.outline.success:hover{color:#fff;background-color:#84b547}.btn.outline.success:focus{color:#fff;background-color:#84b547}.btn.outline.success:active{color:#fff;background-color:#84b547}.btn.outline.danger{color:#ff5b57;border-color:#ff5b57}.btn.outline.danger:hover{color:#fff;background-color:#ff5b57}.btn.outline.danger:focus{color:#fff;background-color:#ff5b57}.btn.outline.danger:active{color:#fff;background-color:#ff5b57}.btn.outline.warning{color:#f59c1a;border-color:#f59c1a}.btn.outline.warning:hover{color:#fff;background-color:#f59c1a}.btn.outline.warning:focus{color:#fff;background-color:#f59c1a}.btn.outline.warning:active{color:#fff;background-color:#f59c1a}.btn.outline.inverted{color:#2d353c;border-color:#2d353c}.btn.outline.inverted:hover{color:#fff;background-color:#2d353c}.btn.outline.inverted:focus{color:#fff;background-color:#2d353c}.btn.outline.inverted:active{color:#fff;background-color:#2d353c}.btn.fluid{display:block;width:100%}.btn.pill{border-radius:16px}.btns{position:relative;display:inline-block;vertical-align:middle}.btns > .btn{position:relative;float:left;border-radius:0;margin-left:-2px}.btns > .btn:first-child{margin-left:0;border-top-left-radius:4px;border-bottom-left-radius:4px}.btns > .btn:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}.btns.vertical > .btn{position:relative;display:block;float:none;border-radius:0;width:100%;max-width:100%;margin-left:0;margin-top:-2px}.btns.vertical > .btn:first-child{margin-top:0;border-top-left-radius:4px;border-top-right-radius:4px}.btns.vertical > .btn:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px}.container{max-width:1170px;margin:0 auto;padding-left:15px;padding-right:15px}.row{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-15px;margin-right:-15px}
.row.no-gutter{margin-left:0;margin-right:0}.row.no-gutter .col,.row.no-gutter .col-1,.row.no-gutter .col-2,.row.no-gutter .col-3,.row.no-gutter .col-4,.row.no-gutter .col-5,.row.no-gutter .col-6,.row.no-gutter .col-7,.row.no-gutter .col-8,.row.no-gutter .col-9,.row.no-gutter .col-10,.row.no-gutter .col-11,.row.no-gutter .col-12{padding:0}.col,.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{position:relative;width:100%;min-height:1px;padding-left:15px;padding-right:15px}@media (min-width: 576px){.col-1{-webkit-box-flex:0;-ms-flex:0 0 8.33333%;flex:0 0 8.33333%;max-width:8.33333%}.col-offset-1{margin-left:8.33333%}.col-2{-webkit-box-flex:0;-ms-flex:0 0 16.66667%;flex:0 0 16.66667%;max-width:16.66667%}.col-offset-2{margin-left:16.66667%}.col-3{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-offset-3{margin-left:25%}.col-4{-webkit-box-flex:0;-ms-flex:0 0 33.33333%;flex:0 0 33.33333%;max-width:33.33333%}.col-offset-4{margin-left:33.33333%}.col-5{-webkit-box-flex:0;-ms-flex:0 0 41.66667%;flex:0 0 41.66667%;max-width:41.66667%}.col-offset-5{margin-left:41.66667%}.col-6{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-offset-6{margin-left:50%}.col-7{-webkit-box-flex:0;-ms-flex:0 0 58.33333%;flex:0 0 58.33333%;max-width:58.33333%}.col-offset-7{margin-left:58.33333%}.col-8{-webkit-box-flex:0;-ms-flex:0 0 66.66667%;flex:0 0 66.66667%;max-width:66.66667%}.col-offset-8{margin-left:66.66667%}.col-9{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-offset-9{margin-left:75%}.col-10{-webkit-box-flex:0;-ms-flex:0 0 83.33333%;flex:0 0 83.33333%;max-width:83.33333%}.col-offset-10{margin-left:83.33333%}.col-11{-webkit-box-flex:0;-ms-flex:0 0 91.66667%;flex:0 0 91.66667%;max-width:91.66667%}.col-offset-11{margin-left:91.66667%}.col-12{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.col-offset-12{margin-left:100%}.cols-10 > .col-1{-webkit-box-flex:0;-ms-flex:0 0 10%;flex:0 0 10%;max-width:10%}.cols-10 > .col-offset-1{margin-left:10%}.cols-10 > .col-2{-webkit-box-flex:0;-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.cols-10 > .col-offset-2{margin-left:20%}.cols-10 > .col-3{-webkit-box-flex:0;-ms-flex:0 0 30%;flex:0 0 30%;max-width:30%}.cols-10 > .col-offset-3{margin-left:30%}.cols-10 > .col-4{-webkit-box-flex:0;-ms-flex:0 0 40%;flex:0 0 40%;max-width:40%}.cols-10 > .col-offset-4{margin-left:40%}.cols-10 > .col-5{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.cols-10 > .col-offset-5{margin-left:50%}.cols-10 > .col-6{-webkit-box-flex:0;-ms-flex:0 0 60%;flex:0 0 60%;max-width:60%}.cols-10 > .col-offset-6{margin-left:60%}.cols-10 > .col-7{-webkit-box-flex:0;-ms-flex:0 0 70%;flex:0 0 70%;max-width:70%}.cols-10 > .col-offset-7{margin-left:70%}.cols-10 > .col-8{-webkit-box-flex:0;-ms-flex:0 0 80%;flex:0 0 80%;max-width:80%}.cols-10 > .col-offset-8{margin-left:80%}.cols-10 > .col-9{-webkit-box-flex:0;-ms-flex:0 0 90%;flex:0 0 90%;max-width:90%}.cols-10 > .col-offset-9{margin-left:90%}.cols-10 > .col-10{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.cols-10 > .col-offset-10{margin-left:100%}.col{-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%}}.media{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.media-body{-webkit-box-flex:1;-ms-flex:1;flex:1}.media-left{padding-right:10px}.media-right{padding-left:10px}.media-heading{margin-top:0;margin-bottom:5px}.media-content{font-size:13px}.avatar{display:inline-block;border-radius:100%;overflow:hidden}.avatar img{display:block}input[type="file"]{display:block}textarea{resize:vertical}label{display:inline-block;font-weight:bold;margin-bottom:5px}.form-control{display:block;width:100%;padding:4px 8px;border:2px solid #ddd;border-radius:4px;background-color:#fff;font-size:14px;line-height:1.42858;color:#333}.form-control:focus{border-color:#348fe2;outline:0}.form-control[disabled]{cursor:not-allowed}.form-label{margin-bottom:0;padding-top:3px;text-align:right}.form-group{margin-bottom:15px}.form-inline{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.form-inline input[type="file"],.form-inline .form-group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.form-inline .form-control{display:inline-block;width:auto;vertical-align:middle}.checkbox,.radio{position:relative;display:block;margin-top:10px;margin-bottom:10px;padding-left:20px}.checkbox label,.radio label{position:relative;display:inline-block;min-height:20px;margin-bottom:0;font-weight:400;cursor:pointer}.checkbox.disabled label,.radio.disabled label{cursor:not-allowed}.checkbox.inline,.radio.inline{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle;font-weight:400}.checkbox + .checkbox,.radio + .radio{margin-top:-5px}.checkbox.inline + .checkbox.inline,.radio.inline + .radio.inline{margin-top:0;margin-left:10px}.checkbox input[type="checkbox"],.radio input[type="radio"]{position:absolute;margin-top:4px;margin-left:-20px}fieldset[disabled] .form-control,fieldset[disabled] .checkbox label,fieldset[disabled] .radio label{cursor:not-allowed}.help-block{display:block;margin-top:5px;margin-bottom:10px;color:#737373}table{background:transparent;border-spacing:0;border-collapse:collapse}.table{width:100%;max-width:100%;margin-bottom:15px}.table > thead > tr,.table > tbody > tr,.table > tfoot > tr{border-bottom:1px solid #ddd}.table > thead > tr > th,.table > thead > tr > td,.table > tbody > tr > th,.table > tbody > tr > td,.table > tfoot > tr > th,.table > tfoot > tr > td{padding:8px;line-height:1.428;vertical-align:middle;text-align:left}.table > thead > tr:last-child,.table > tbody > tr:last-child,.table > tfoot > tr:last-child{border:none}.table > thead{background-color:#f5f5f5;border-bottom:1px solid #ddd}.table.bordered{border:1px solid #ddd}.table.bordered > thead > tr > th,.table.bordered > thead > tr > td,.table.bordered > tbody > tr > th,.table.bordered > tbody > tr > td,.table.bordered > tfoot > tr > th,.table.bordered > tfoot > tr > td{border:1px solid #ddd}.table.striped > tbody > tr:nth-of-type(2n+2){background-color:#f5f5f5}.table.hover > tbody > tr:hover{background-color:#f5f5f5}.table-overflow{min-height:.01%;overflow-x:auto;-webkit-overflow-scrolling:touch}.box{padding:10px 15px;margin-bottom:15px;border:1px solid #ddd;border-radius:4px;background-color:#fff}.boxes{border:2px solid transparent;border-radius:5px;margin-bottom:15px}.boxes > .box{border-width:0;border-radius:0;margin-bottom:0}.boxes > .box:first-child{border-top-left-radius:3px !important;border-top-right-radius:3px !important}.boxes > .box:last-child{border-bottom-left-radius:3px !important;border-bottom-right-radius:3px !important}.boxes > .box.box-header{background-color:#f5f5f5}.boxes > .box.box-body{padding-top:15px;padding-bottom:15px}.boxes > .box.box-footer{background-color:#f5f5f5}.boxes .box + .box{border-top-width:1px}.boxes .boxes{margin-bottom:0}.boxes.default{border-color:#ddd}.boxes.primary{border-color:#348fe2}.boxes.info{border-color:#49b6d6}.boxes.success{border-color:#84b547}.boxes.danger{border-color:#ff5b57}.boxes.warning{border-color:#f59c1a}.boxes.inverted{border-color:#2d353c}.boxes.transparent{background-color:transparent}.boxes.transparent .box{background-color:transparent}.boxes.raised{border-color:#ddd;-webkit-box-shadow:0 2px 10px 3px rgba(34, 36, 38, .12);box-shadow:0 2px 10px 3px rgba(34, 36, 38, .12)}
.boxes.secondary{border-width:0}.boxes.secondary > .box{border-width:1px;border-radius:4px}.boxes.secondary > .box.box-header{background-color:transparent;margin-bottom:0;border-width:0;border-radius:0 !important}.boxes.secondary > .box.box-body{padding-top:15px;padding-bottom:15px;margin-bottom:0}.boxes.secondary > .box.box-footer{background-color:transparent;border-width:0;border-radius:0 !important}.bg-primary{background-color:#348fe2}.bg-info{background-color:#49b6d6}.bg-success{background-color:#84b547}.bg-danger{background-color:#ff5b57}.bg-warning{background-color:#f59c1a}.bg-inverted{background-color:#2d353c}.text-muted{color:#555}.text-white{color:#fff}.text-primary{color:#348fe2}.text-info{color:#49b6d6}.text-success{color:#84b547}.text-danger{color:#ff5b57}.text-warning{color:#f59c1a}.text-inverted{color:#2d353c}.pull-right{float:right}.pull-left{float:left}.clearfix::before,.clearfix::after{content:" ";display:table}.clearfix::after{clear:both}.center-block{display:block;margin-left:auto;margin-right:auto}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-top{vertical-align:top}.align-middle{vertical-align:middle}.align-bottom{vertical-align:bottom}.text-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.text-uppercase{text-transform:uppercase}.text-middle::before{content:'';display:inline-block;width:0;height:100%;vertical-align:middle}
  </style>
  <style>
.f-w-100{font-weight:100 !important}.f-w-200{font-weight:200 !important}.f-w-300{font-weight:300 !important}.f-w-400{font-weight:400 !important}.f-w-500{font-weight:500 !important}.f-w-600{font-weight:600 !important}.f-w-700{font-weight:700 !important}.f-w-800{font-weight:800 !important}.f-w-900{font-weight:900 !important}.f-s-10{font-size:10px !important}.f-s-12{font-size:12px !important}.f-s-14{font-size:14px !important}.f-s-16{font-size:16px !important}.f-s-18{font-size:18px !important}.f-s-20{font-size:20px !important}.f-s-22{font-size:22px !important}.f-s-24{font-size:24px !important}.f-s-26{font-size:26px !important}.f-s-28{font-size:28px !important}.f-s-30{font-size:30px !important}.f-s-32{font-size:32px !important}.f-s-34{font-size:34px !important}.f-s-36{font-size:36px !important}.f-s-0{font-size:0}.text-left{text-align:left !important}.text-center{text-align:center !important}.text-right{text-align:right !important}.text-ellipsis{white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important}.text-uppercase{text-transform:uppercase}.align-top{vertical-align:top !important}.align-middle{vertical-align:middle !important}.align-bottom{vertical-align:bottom !important}.pull-left{float:left !important}.pull-right{float:right !important}.pull-none{float:none !important}.row.no-gutter,.row.gutter-0{margin:0 !important}.row.no-gutter > [class*="col-"],.row.gutter-0 > [class*="col-"]{padding:0 !important}.row.gutter-2{margin:-1px !important}.row.gutter-2 > [class*="col-"]{padding:0 1px !important}.row.gutter-4{margin:-2px !important}.row.gutter-4 > [class*="col-"]{padding:0 2px !important}.row.gutter-6{margin:-3px !important}.row.gutter-6 > [class*="col-"]{padding:0 3px !important}.row.gutter-8{margin:-4px !important}.row.gutter-8 > [class*="col-"]{padding:0 4px !important}.row.gutter-10{margin:-5px !important}.row.gutter-10 > [class*="col-"]{padding:0 5px !important}.row.gutter-12{margin:-6px !important}.row.gutter-12 > [class*="col-"]{padding:0 6px !important}.row.gutter-14{margin:-7px !important}.row.gutter-14 > [class*="col-"]{padding:0 7px !important}.row.gutter-16{margin:-8px !important}.row.gutter-16 > [class*="col-"]{padding:0 8px !important}.row.gutter-18{margin:-9px !important}.row.gutter-18 > [class*="col-"]{padding:0 9px !important}.row.gutter-20{margin:-10px !important}.row.gutter-20 > [class*="col-"]{padding:0 10px !important}.row.gutter-22{margin:-11px !important}.row.gutter-22 > [class*="col-"]{padding:0 11px !important}.row.gutter-24{margin:-12px !important}.row.gutter-24 > [class*="col-"]{padding:0 12px !important}.row.gutter-26{margin:-13px !important}.row.gutter-26 > [class*="col-"]{padding:0 13px !important}.row.gutter-28{margin:-14px !important}.row.gutter-28 > [class*="col-"]{padding:0 14px !important}.row.gutter-30{margin:-15px !important}.row.gutter-30 > [class*="col-"]{padding:0 15px !important}.m-auto{margin:0 auto !important}.m-0{margin:0 !important}.m-t-0{margin-top:0 !important}.m-r-0{margin-right:0 !important}.m-b-0{margin-bottom:0 !important}.m-l-0{margin-left:0 !important}.m-5{margin:5px !important}.m-t-5{margin-top:5px !important}.m-r-5{margin-right:5px !important}.m-b-5{margin-bottom:5px !important}.m-l-5{margin-left:5px !important}.m-10{margin:10px !important}.m-t-10{margin-top:10px !important}.m-r-10{margin-right:10px !important}.m-b-10{margin-bottom:10px !important}.m-l-10{margin-left:10px !important}.m-15{margin:15px !important}.m-t-15{margin-top:15px !important}.m-r-15{margin-right:15px !important}.m-b-15{margin-bottom:15px !important}.m-l-15{margin-left:15px !important}.m-20{margin:20px !important}.m-t-20{margin-top:20px !important}.m-r-20{margin-right:20px !important}.m-b-20{margin-bottom:20px !important}.m-l-20{margin-left:20px !important}.m-25{margin:25px !important}.m-t-25{margin-top:25px !important}.m-r-25{margin-right:25px !important}.m-b-25{margin-bottom:25px !important}.m-l-25{margin-left:25px !important}.m-30{margin:30px !important}.m-t-30{margin-top:30px !important}.m-r-30{margin-right:30px !important}.m-b-30{margin-bottom:30px !important}.m-l-30{margin-left:30px !important}.m-35{margin:35px !important}.m-t-35{margin-top:35px !important}.m-r-35{margin-right:35px !important}.m-b-35{margin-bottom:35px !important}.m-l-35{margin-left:35px !important}.m-40{margin:40px !important}.m-t-40{margin-top:40px !important}.m-r-40{margin-right:40px !important}.m-b-40{margin-bottom:40px !important}.m-l-40{margin-left:40px !important}.m-45{margin:45px !important}.m-t-45{margin-top:45px !important}.m-r-45{margin-right:45px !important}.m-b-45{margin-bottom:45px !important}.m-l-45{margin-left:45px !important}.m-50{margin:50px !important}.m-t-50{margin-top:50px !important}.m-r-50{margin-right:50px !important}.m-b-50{margin-bottom:50px !important}.m-l-50{margin-left:50px !important}.m-t--5{margin-top:-5px !important}.m-r--5{margin-right:-5px !important}.m-b--5{margin-bottom:-5px !important}.m-l--5{margin-left:-5px !important}.m-t--10{margin-top:-10px !important}.m-r--10{margin-right:-10px !important}.m-b--10{margin-bottom:-10px !important}.m-l--10{margin-left:-10px !important}.m-t--15{margin-top:-15px !important}.m-r--15{margin-right:-15px !important}.m-b--15{margin-bottom:-15px !important}.m-l--15{margin-left:-15px !important}.m-t--20{margin-top:-20px !important}.m-r--20{margin-right:-20px !important}.m-b--20{margin-bottom:-20px !important}.m-l--20{margin-left:-20px !important}.m-t--25{margin-top:-25px !important}.m-r--25{margin-right:-25px !important}.m-b--25{margin-bottom:-25px !important}.m-l--25{margin-left:-25px !important}.m-t--30{margin-top:-30px !important}.m-r--30{margin-right:-30px !important}.m-b--30{margin-bottom:-30px !important}.m-l--30{margin-left:-30px !important}.m-t--35{margin-top:-35px !important}.m-r--35{margin-right:-35px !important}.m-b--35{margin-bottom:-35px !important}.m-l--35{margin-left:-35px !important}.m-t--40{margin-top:-40px !important}.m-r--40{margin-right:-40px !important}.m-b--40{margin-bottom:-40px !important}.m-l--40{margin-left:-40px !important}.m-t--45{margin-top:-45px !important}.m-r--45{margin-right:-45px !important}.m-b--45{margin-bottom:-45px !important}.m-l--45{margin-left:-45px !important}.m-t--50{margin-top:-50px !important}.m-r--50{margin-right:-50px !important}.m-b--50{margin-bottom:-50px !important}.m-l--50{margin-left:-50px !important}.p-0{padding:0 !important}.p-t-0{padding-top:0 !important}.p-r-0{padding-right:0 !important}.p-b-0{padding-bottom:0 !important}.p-l-0{padding-left:0 !important}.p-5{padding:5px !important}.p-t-5{padding-top:5px !important}.p-r-5{padding-right:5px !important}.p-b-5{padding-bottom:5px !important}.p-l-5{padding-left:5px !important}.p-10{padding:10px !important}.p-t-10{padding-top:10px !important}.p-r-10{padding-right:10px !important}.p-b-10{padding-bottom:10px !important}.p-l-10{padding-left:10px !important}.p-15{padding:15px !important}.p-t-15{padding-top:15px !important}.p-r-15{padding-right:15px !important}.p-b-15{padding-bottom:15px !important}.p-l-15{padding-left:15px !important}.p-20{padding:20px !important}.p-t-20{padding-top:20px !important}.p-r-20{padding-right:20px !important}.p-b-20{padding-bottom:20px !important}.p-l-20{padding-left:20px !important}.p-25{padding:25px !important}.p-t-25{padding-top:25px !important}.p-r-25{padding-right:25px !important}.p-b-25{padding-bottom:25px !important}.p-l-25{padding-left:25px !important}.p-30{padding:30px !important}.p-t-30{padding-top:30px !important}.p-r-30{padding-right:30px !important}.p-b-30{padding-bottom:30px !important}.p-l-30{padding-left:30px !important}.p-35{padding:35px !important}.p-t-35{padding-top:35px !important}.p-r-35{padding-right:35px !important}.p-b-35{padding-bottom:35px !important}.p-l-35{padding-left:35px !important}.p-40{padding:40px !important}
.p-t-40{padding-top:40px !important}.p-r-40{padding-right:40px !important}.p-b-40{padding-bottom:40px !important}.p-l-40{padding-left:40px !important}.p-45{padding:45px !important}.p-t-45{padding-top:45px !important}.p-r-45{padding-right:45px !important}.p-b-45{padding-bottom:45px !important}.p-l-45{padding-left:45px !important}.p-50{padding:50px !important}.p-t-50{padding-top:50px !important}.p-r-50{padding-right:50px !important}.p-b-50{padding-bottom:50px !important}.p-l-50{padding-left:50px !important}.h-full{height:100%}.w-full{width:100% !important}.h-50{height:50px !important}.w-50{width:50px !important}.h-100{height:100px !important}.w-100{width:100px !important}.h-150{height:150px !important}.w-150{width:150px !important}.h-200{height:200px !important}.w-200{width:200px !important}.h-250{height:250px !important}.w-250{width:250px !important}.h-300{height:300px !important}.w-300{width:300px !important}.h-350{height:350px !important}.w-350{width:350px !important}.h-400{height:400px !important}.w-400{width:400px !important}.h-450{height:450px !important}.w-450{width:450px !important}.h-500{height:500px !important}.w-500{width:500px !important}.h-550{height:550px !important}.w-550{width:550px !important}.h-600{height:600px !important}.w-600{width:600px !important}.no-border{border-width:0 !important}.border-none{border-style:none !important}.b-0{border:0 solid #eee !important}.b-t-0{border-top:0 solid #eee !important}.b-r-0{border-right:0 solid #eee !important}.b-b-0{border-bottom:0 solid #eee !important}.b-l-0{border-left:0 solid #eee !important}.b-1{border:1px solid #eee !important}.b-t-1{border-top:1px solid #eee !important}.b-r-1{border-right:1px solid #eee !important}.b-b-1{border-bottom:1px solid #eee !important}.b-l-1{border-left:1px solid #eee !important}.b-2{border:2px solid #eee !important}.b-t-2{border-top:2px solid #eee !important}.b-r-2{border-right:2px solid #eee !important}.b-b-2{border-bottom:2px solid #eee !important}.b-l-2{border-left:2px solid #eee !important}.b-3{border:3px solid #eee !important}.b-t-3{border-top:3px solid #eee !important}.b-r-3{border-right:3px solid #eee !important}.b-b-3{border-bottom:3px solid #eee !important}.b-l-3{border-left:3px solid #eee !important}.b-4{border:4px solid #eee !important}.b-t-4{border-top:4px solid #eee !important}.b-r-4{border-right:4px solid #eee !important}.b-b-4{border-bottom:4px solid #eee !important}.b-l-4{border-left:4px solid #eee !important}.b-5{border:5px solid #eee !important}.b-t-5{border-top:5px solid #eee !important}.b-r-5{border-right:5px solid #eee !important}.b-b-5{border-bottom:5px solid #eee !important}.b-l-5{border-left:5px solid #eee !important}.r-full{border-radius:100%}.r-t-l-full{border-top-left-radius:100%}.r-t-r-full{border-top-right-radius:100%}.r-b-r-full{border-bottom-right-radius:100%}.r-b-l-full{border-bottom-left-radius:100%}.r-0{border-radius:0 !important}.r-t-l-0{border-top-left-radius:0 !important}.r-t-r-0{border-top-right-radius:0 !important}.r-b-r-0{border-bottom-right-radius:0 !important}.r-b-l-0{border-bottom-left-radius:0 !important}.r-2{border-radius:2px !important}.r-t-l-1{border-top-left-radius:2px !important}.r-t-r-1{border-top-right-radius:2px !important}.r-b-r-1{border-bottom-right-radius:2px !important}.r-b-l-1{border-bottom-left-radius:2px !important}.r-4{border-radius:4px !important}.r-t-l-2{border-top-left-radius:4px !important}.r-t-r-2{border-top-right-radius:4px !important}.r-b-r-2{border-bottom-right-radius:4px !important}.r-b-l-2{border-bottom-left-radius:4px !important}.r-6{border-radius:6px !important}.r-t-l-3{border-top-left-radius:6px !important}.r-t-r-3{border-top-right-radius:6px !important}.r-b-r-3{border-bottom-right-radius:6px !important}.r-b-l-3{border-bottom-left-radius:6px !important}.r-8{border-radius:8px !important}.r-t-l-4{border-top-left-radius:8px !important}.r-t-r-4{border-top-right-radius:8px !important}.r-b-r-4{border-bottom-right-radius:8px !important}.r-b-l-4{border-bottom-left-radius:8px !important}.r-10{border-radius:10px !important}.r-t-l-5{border-top-left-radius:10px !important}.r-t-r-5{border-top-right-radius:10px !important}.r-b-r-5{border-bottom-right-radius:10px !important}.r-b-l-5{border-bottom-left-radius:10px !important}.r-12{border-radius:12px !important}.r-t-l-6{border-top-left-radius:12px !important}.r-t-r-6{border-top-right-radius:12px !important}.r-b-r-6{border-bottom-right-radius:12px !important}.r-b-l-6{border-bottom-left-radius:12px !important}.r-14{border-radius:14px !important}.r-t-l-7{border-top-left-radius:14px !important}.r-t-r-7{border-top-right-radius:14px !important}.r-b-r-7{border-bottom-right-radius:14px !important}.r-b-l-7{border-bottom-left-radius:14px !important}.r-16{border-radius:16px !important}.r-t-l-8{border-top-left-radius:16px !important}.r-t-r-8{border-top-right-radius:16px !important}.r-b-r-8{border-bottom-right-radius:16px !important}.r-b-l-8{border-bottom-left-radius:16px !important}.r-18{border-radius:18px !important}.r-t-l-9{border-top-left-radius:18px !important}.r-t-r-9{border-top-right-radius:18px !important}.r-b-r-9{border-bottom-right-radius:18px !important}.r-b-l-9{border-bottom-left-radius:18px !important}.r-20{border-radius:20px !important}.r-t-l-10{border-top-left-radius:20px !important}.r-t-r-10{border-top-right-radius:20px !important}.r-b-r-10{border-bottom-right-radius:20px !important}.r-b-l-10{border-bottom-left-radius:20px !important}.no-shadow,.shadow-none{box-shadow:none !important}.shadow-xs{box-shadow:0 1px 5px 1px rgba(0, 0, 0, .15)}.shadow-sm{box-shadow:0 2px 10px 2px rgba(0, 0, 0, .15)}.shadow-md{box-shadow:0 3px 20px 3px rgba(0, 0, 0, .15)}.shadow-lg{box-shadow:0 4px 30px 4px rgba(0, 0, 0, .15)}.shadow-xl{box-shadow:0 5px 40px 5px rgba(0, 0, 0, .15)}.overflow-auto{overflow:auto !important}.overflow-hidden{overflow:hidden !important}.overflow-visible{overflow:visible !important}.overflow-scroll{overflow:scroll !important}.overflow-x-hidden{overflow-x:hidden !important}.overflow-x-visible{overflow-x:visible !important}.overflow-x-scroll{overflow-x:scroll !important}.overflow-y-hidden{overflow-y:hidden !important}.overflow-y-visible{overflow-y:visible !important}.overflow-y-scroll{overflow-y:scroll !important}.bg-transparent{background-color:transparent}.bg-white{background-color:#fff}.bg-black{background-color:#2d353c}.bg-gray{background-color:#999}.bg-gray-light{background-color:#bfbfbf}.bg-gray-lighter{background-color:#d9d9d9}.bg-gray-lightest{background-color:#f2f2f2}.bg-gray-dark{background-color:#737373}.bg-gray-darker{background-color:#595959}.bg-gray-darkest{background-color:#404040}.bg-brown{background-color:#a57868}.bg-brown-light{background-color:#c2a398}.bg-brown-lighter{background-color:#d5bfb8}.bg-brown-lightest{background-color:#e8dcd8}.bg-brown-dark{background-color:#795548}.bg-brown-darker{background-color:#593e35}.bg-brown-darkest{background-color:#392822}.bg-red{background-color:#ff291d}.bg-red-light{background-color:#ff716a}.bg-red-lighter{background-color:#ffa29d}.bg-red-lightest{background-color:#ffd2d0}.bg-red-dark{background-color:#d00b00}.bg-red-darker{background-color:#9d0800}.bg-red-darkest{background-color:#6a0600}.bg-orange{background-color:#ff9500}.bg-orange-light{background-color:#ffb54d}.bg-orange-lighter{background-color:#ffca80}.bg-orange-lightest{background-color:#ffdfb3}.bg-orange-dark{background-color:#b36800}.bg-orange-darker{background-color:#804b00}.bg-orange-darkest{background-color:#4d2d00}.bg-yellow{background-color:#ffe70e}.bg-yellow-light{background-color:#ffef5b}.bg-yellow-lighter{background-color:#fff48e}.bg-yellow-lightest{background-color:#fff9c1}.bg-yellow-dark{background-color:#c1ad00}.bg-yellow-darker{background-color:#8e7f00}.bg-yellow-darkest{background-color:#5b5100}.bg-green{background-color:#4cd964}
.bg-green-light{background-color:#8be69b}.bg-green-lighter{background-color:#b5efbf}.bg-green-lightest{background-color:#dff8e4}.bg-green-dark{background-color:#26b33e}.bg-green-darker{background-color:#1d892f}.bg-green-darkest{background-color:#145e21}.bg-teal{background-color:#18e0cd}.bg-teal-light{background-color:#57eddf}.bg-teal-lighter{background-color:#86f2e8}.bg-teal-lightest{background-color:#b4f7f1}.bg-teal-dark{background-color:#119b8e}.bg-teal-darker{background-color:#0c6d64}.bg-teal-darkest{background-color:#073f39}.bg-blue{background-color:#007aff}.bg-blue-light{background-color:#4da2ff}.bg-blue-lighter{background-color:#80bdff}.bg-blue-lightest{background-color:#b3d7ff}.bg-blue-dark{background-color:#0055b3}.bg-blue-darker{background-color:#003d80}.bg-blue-darkest{background-color:#00254d}.bg-indigo{background-color:#5f6ec7}.bg-indigo-light{background-color:#98a1db}.bg-indigo-lighter{background-color:#bdc4e8}.bg-indigo-lightest{background-color:#e3e6f5}.bg-indigo-dark{background-color:#3847a1}.bg-indigo-darker{background-color:#2b377b}.bg-indigo-darkest{background-color:#1e2656}.bg-purple{background-color:#af2ec5}.bg-purple-light{background-color:#ca65db}.bg-purple-lighter{background-color:#d88ee5}.bg-purple-lightest{background-color:#e6b7ee}.bg-purple-dark{background-color:#782087}.bg-purple-darker{background-color:#53165e}.bg-purple-darkest{background-color:#2e0c34}.bg-pink{background-color:#ff3069}.bg-pink-light{background-color:#ff7da0}.bg-pink-lighter{background-color:#ffb0c5}.bg-pink-lightest{background-color:#ffe3ea}.bg-pink-dark{background-color:#e3003e}.bg-pink-darker{background-color:#b00030}.bg-pink-darkest{background-color:#7d0022}.text-white{color:#fff}.text-black{color:#2d353c}.text-gray{color:#999}.text-gray-light{color:#bfbfbf}.text-gray-lighter{color:#d9d9d9}.text-gray-lightest{color:#f2f2f2}.text-gray-dark{color:#737373}.text-gray-darker{color:#595959}.text-gray-darkest{color:#404040}.text-brown{color:#a57868}.text-brown-light{color:#c2a398}.text-brown-lighter{color:#d5bfb8}.text-brown-lightest{color:#e8dcd8}.text-brown-dark{color:#795548}.text-brown-darker{color:#593e35}.text-brown-darkest{color:#392822}.text-red{color:#ff291d}.text-red-light{color:#ff716a}.text-red-lighter{color:#ffa29d}.text-red-lightest{color:#ffd2d0}.text-red-dark{color:#d00b00}.text-red-darker{color:#9d0800}.text-red-darkest{color:#6a0600}.text-orange{color:#ff9500}.text-orange-light{color:#ffb54d}.text-orange-lighter{color:#ffca80}.text-orange-lightest{color:#ffdfb3}.text-orange-dark{color:#b36800}.text-orange-darker{color:#804b00}.text-orange-darkest{color:#4d2d00}.text-yellow{color:#ffe70e}.text-yellow-light{color:#ffef5b}.text-yellow-lighter{color:#fff48e}.text-yellow-lightest{color:#fff9c1}.text-yellow-dark{color:#c1ad00}.text-yellow-darker{color:#8e7f00}.text-yellow-darkest{color:#5b5100}.text-green{color:#4cd964}.text-green-light{color:#8be69b}.text-green-lighter{color:#b5efbf}.text-green-lightest{color:#dff8e4}.text-green-dark{color:#26b33e}.text-green-darker{color:#1d892f}.text-green-darkest{color:#145e21}.text-teal{color:#18e0cd}.text-teal-light{color:#57eddf}.text-teal-lighter{color:#86f2e8}.text-teal-lightest{color:#b4f7f1}.text-teal-dark{color:#119b8e}.text-teal-darker{color:#0c6d64}.text-teal-darkest{color:#073f39}.text-blue{color:#007aff}.text-blue-light{color:#4da2ff}.text-blue-lighter{color:#80bdff}.text-blue-lightest{color:#b3d7ff}.text-blue-dark{color:#0055b3}.text-blue-darker{color:#003d80}.text-blue-darkest{color:#00254d}.text-indigo{color:#5f6ec7}.text-indigo-light{color:#98a1db}.text-indigo-lighter{color:#bdc4e8}.text-indigo-lightest{color:#e3e6f5}.text-indigo-dark{color:#3847a1}.text-indigo-darker{color:#2b377b}.text-indigo-darkest{color:#1e2656}.text-purple{color:#af2ec5}.text-purple-light{color:#ca65db}.text-purple-lighter{color:#d88ee5}.text-purple-lightest{color:#e6b7ee}.text-purple-dark{color:#782087}.text-purple-darker{color:#53165e}.text-purple-darkest{color:#2e0c34}.text-pink{color:#ff3069}.text-pink-light{color:#ff7da0}.text-pink-lighter{color:#ffb0c5}.text-pink-lightest{color:#ffe3ea}.text-pink-dark{color:#e3003e}.text-pink-darker{color:#b00030}.text-pink-darkest{color:#7d0022}
  </style>
  <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
  <style>
    html,
    body {
      background-color: #f5f5f5;
    }

    .page {
      max-width: 800px;
      margin: 20px auto;
      padding: 20px;
      box-shadow: 1px 1px 8px rgba(0, 0, 0, .15);
      background-color: #fff;
    }

    h1 {
      margin-left: -20px;
      padding-left: 15px;
      border-left: 5px solid #F8B62D;
    }

    .border {
      position: relative;
    }

    .border:before {
      content: '';
      position: absolute;
      top: 0;
      left: -2px;
      width: 2px;
      height: 100%;
      background: #ddd;
      border-left: 2px solid #ddd !important;
    }

    section a {
      color: #666;
    }

    section a:hover {
      color: #333;
      text-decoration: underline;
    }
  </style>
<meta name="generator" content="Hexo 4.2.0"><link rel="alternate" href="/atom.xml" title="张文川的博客" type="application/atom+xml">
</head>

<body class="">
  <main class="page">
    <section>
      <h1 class="f-s-18 f-w-900 m-b-20">联系方式</h1>
      <div class="boxes default m-b-20">
        <div class="box bg-gray-lightest p-t-0 p-b-0">
          <div class="row">
            <div class="col-4 p-t-10 p-b-10">● 手机：13522750636</div>
            <div class="col-4 p-t-10 p-b-10 border">● Email：13522750636@163.com</div>
            <div class="col-4 p-t-10 p-b-10 border">● 微信：13522750636</div>
          </div>
        </div>
      </div>
    </section>

    <section>
      <h1 class="f-s-18 f-w-900 m-b-20">个人信息</h1>
      <div class="boxes default m-b-20">
        <div class="box bg-gray-lightest p-t-0 p-b-0">
          <div class="row">
            <div class="col-4 p-t-10 p-b-10">● 张文川 | 男 | 1993</div>
            <div class="col-4 p-t-10 p-b-10 border">● 湖北文理学院 | 电子信息工程 | 本科</div>
            <div class="col-4 p-t-10 p-b-10 border">● 前端开发 | 3 年工作经验</div>
          </div>
        </div>
        <div class="box bg-gray-lightest p-t-0 p-b-0">
          <div class="row">
            <div class="col-6 p-t-10 p-b-10">
              ● Github：
              <a href="https://github.com/wenchuanzhang" target="_blank">https://github.com/wenchuanzhang</a></div>
            <div class="col-6 p-t-10 p-b-10 border">
              ● 技术博客：
              <a href="https://wczhang.com" target="_blank">https://wczhang.com</a>
            </div>
          </div>
        </div>
        <div class="box bg-gray-lightest">
          ● 英语水平：英语四级(可熟练阅读英文技术文档)
        </div>
      </div>
    </section>

    <section>
      <h1 class="f-s-18 f-w-900 m-b-20">技术优势</h1>
      <div class="boxes default m-b-20">
        <div class="box bg-gray-lightest">
          ● 熟悉 Vuejs，了解 Vuejs 基本实现原理
        </div>
        <div class="box bg-gray-lightest">
          ● 擅长前端工程化建设，开发前端脚手架工具
        </div>
        <div class="box bg-gray-lightest">
          ● 熟练掌握Git工作流，能够高效的与同事协同开发
        </div>
      </div>
    </section>

    <section>
      <h1 class="f-s-18 f-w-900 m-b-20">个人项目</h1>
      <div class="boxes default m-b-20">
        <div class="box bg-gray-lightest">
          ● Vue 轮子框架：
          <a href="https://github.com/wenchuanzhang/zwc-ui" target="_blank">https://github.com/wenchuanzhang/zwc-ui</a>
        </div>

      </div>
    </section>

    <section>
      <h1 class="f-s-18 f-w-900 m-b-20">工作经历</h1>
      <div class="boxes default m-b-20">
        <div class="box bg-gray-lightest">
          ● 北京溯农科技有限公司 （ 2017 年 4 月 ~ 至今 ）
        </div>
        <div class="box bg-gray-lightest">
          <p class="m-t-0"> 溯农二维码追溯系统</p>
          <p>主要负责此系统的窜货报警，假货报警，促销红包的发放，二维码生成功能的后端接口实现。</p>
        </div>
      </div>

    </section>
  </main>
</body>

</html>
